<!-- 体验卡销售-组件模板 -->
<template>
	<view class="salesDoms">
		<!-- 基础表单校验 -->
		<view class="formDoms">
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData" label-width="80px">
				<uni-forms-item label="体验卡" required name="cardName">
					<superwei-combox
						v-model="valiFormData.cardName" 
						:candidates="cardList" 
						:isJSON="true" 
						:isAllowCreate="false"
						keyName="projectName" 
						placeholder="请选择体验卡" 
						@select="tPChange">
					</superwei-combox>
				</uni-forms-item>
				<uni-forms-item label="门店" required name="shopName">
					<superwei-combox
						v-model="valiFormData.shopName" 
						:candidates="shopingList" 
						:isJSON="true" 
						:isAllowCreate="false"
						keyName="name" 
						placeholder="请选择门店" 
						@select="xPChange">
					</superwei-combox>
				</uni-forms-item>
				<uni-forms-item label="客户姓名" required name="customerName">
					<uni-easyinput v-model="valiFormData.customerName" placeholder="请输入客户姓名" />
				</uni-forms-item>
				<uni-forms-item label="销售日期" name="saleDate">
					<uni-datetime-picker v-model="valiFormData.saleDate" type="date" return-type="string" placeholder="请输入销售日期" />
				</uni-forms-item>
				<uni-forms-item label="备注" name="remark">
					<uni-easyinput type="textarea" v-model="valiFormData.remark" placeholder="请输入备注" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="signDoms">
			<button type="primary" @click="submit('valiForm')">提 交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardList: [{id: 99, projectName: "测试体验卡"}],
				shopingList: [{id: 100, name: "测试门店"}],  // 门店列表
				orderDtlList: [],  		//  添加套组核销
				expCardList: [],  		// 添加体验卡核销
				extraProjectList: [],  	// 添加附加项目核销
	 			// 校验表单数据
				valiFormData: {
					// 字段：体验卡（下拉选择）、门店shopId（搜索选择）、客户姓名customerName、销售日期 saleDate、备注remark
					cardId: '', 		// 体验卡（下拉选择）
					cardName: '', 		// 体验卡名称
					shopId: '',  		//  门店shopId（搜索选择）
					shopName: '',  		//  门店名称
					customerName: '',  	//  客户姓名
					saleDate: null, 	// 销售日期
					remark: '',   		//  备注
				},
				// 校验规则
				rules: {
					/* shopId: {
						rules: [{
							required: true,
							errorMessage: '门店不能为空'
						}]
					}, */
					customerName: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					}
				}
			};
		},
		onLoad() {
			// 初始化-数据
			this.initData();
		},
		methods: {
			/** 初始化-表单函数 */
			initData() {
				// 初始化-查询体验卡列表
				this.getCardList();
				// 初始化-查询门店列表
				this.getShopList();
			},
			
			/** 请求-门店列表-函数 */
			getShopList() {
				let urls = this.$apiNames.KH_SHOP_LIST;
				urls += "?pageIndex=0&pageSize=1000";
				// 请求门店列表-api
				this.$myHttps(urls).then(res => {
					// console.log("请求门店列表：", res);
					if(res.code == 0) {
						// 赋值
						this.shopingList =  res.data;
					} else {
						this.$Msg(res.msg);
					}
				});
			},
			
			/** 请求-体验卡列表-函数 */
			getCardList() {
				let urls = this.$apiNames.KH_CARD_LIST;
				// 请求体验卡列表-api
				this.$myHttps(urls).then(res => {
					// console.log("请求体验卡列表：", res);
					if(res.code == 0) {
						// 赋值
						this.cardList =  res.data;
					} else {
						this.$Msg(res.msg);
					}
				});
			},
			
			/** 提交-按钮-事件 */
			submit(form) {
				// 字段：体验卡cardId（下拉选择）、门店shopId（搜索选择）、客户姓名customerName、销售日期 saleDate、备注remark
				this.$refs[form].validate().then(res=>{
					this.$myHttps(this.$apiNames.KH_EXPCARDSALE_ADD, this.valiFormData).then(res => {
						if(res.code == 0) {
							// 提示信息
							this.$Msg(res.msg ? res.msg : "添加体验卡销售成功~");
							// 返回上上一页
							uni.navigateBack();
						} else {
							this.$Msg(res.msg ? res.msg : '添加体验卡销售系统错误，请联系管理员~');
						}
					})
				}).catch(err =>{
					this.$Msg('请正确填写表单~');
					console.log('表单错误信息：', err);
				})
			},
			
			/**
			 * 【门店】选择数据-值变化-事件
			 */
			xPChange(data) {
				// console.log("【门店】选择数据:", data);
				// 清空，上次城市的数据
				this.valiFormData.shopId = data.id;
			},
			
			/**
			 * 【体验卡】选择数据-值变化-事件
			 */
			tPChange(data) {
				// console.log("【体验卡】选择数据:", data);
				// 清空，上次城市的数据
				this.valiFormData.cardId = data.id;
			},
			
			/** 核销-按钮-事件 */
			toSelectRoute(url, flag) {
				// 如果是【套组核销】
				if(flag == '1' || flag == '2') {
					this.$refs.valiForm.validate().then(res=>{
						url += "?shopId=" + this.valiFormData.shopId;
						url += "&shopName=" + this.valiFormData.shopName;
						url += "&customerName=" + this.valiFormData.customerName;
						// 跳转-首页
						this.$RouterTo(url);
					}).catch(err =>{
						console.log('表单错误信息：', err);
					})
				} else {
					// 跳转-首页
					this.$RouterTo(url);
				}
			},
			
			/** 
			 * 其它页面，选项返回的数据
			 * @param {Object} obj : 页面返回回填的数据对象
			 * @param {String} flag : 判断回填位置的参数；1、添加套组核销；2、添加体验卡核销；3、添加附加项目核销；4、客户签字
			 */
			selectPagesData(obj, flag) {
				console.log("您选择了：", obj, flag);
				if(flag == '1') {
					let item = {
						orderDtlId: obj.id,
						useCount: obj.useCount,
						remark: obj.remark
					};
					// 赋值
					this.orderDtlList.push(obj);
					this.valiFormData.orderDtlList.push(item);
				}
				if(flag == '2') {
					let item = {
						expcardSaleId: obj.id,
						useCount: obj.useCount,
						remark: obj.remark
					};
					// 赋值
					this.expCardList.push(obj);
					this.valiFormData.expCardList.push(item);
				}
				if(flag == '3') {
					let item = {
						extraProjectId: obj.id,
						useCount: obj.useCount,
						remark: obj.remark
					};
					// 赋值
					this.extraProjectList.push(obj);
					this.valiFormData.extraProjectList.push(item);
				}
				// 客户签名，图片base64字符串
				if(flag == '4') {
					this.valiFormData.sign = obj.sign;
				}
				console.log("最终表单数据：", this.valiFormData);
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.salesDoms {
		.formDoms {
			background-color: #ffffff;
			border-radius: 10upx;
			box-sizing: border-box;
			padding: 40upx 20upx 140upx;
			margin: 30upx 30upx 100upx;
		}
		.signDoms {
			position: fixed;
			width: 100%;
			bottom: 20upx;
			padding: 0 50upx;
			box-sizing: border-box;
		}
		.itemDoms {
			padding: 20upx 20upx 0 20upx;
			margin-bottom: 30upx;
			border: 1px solid #eeeeee;
			border-radius: 10upx;
		}
	}
</style>